diff --git a/.github/labeler.yml b/.github/labeler.yml index 229434e371..a263b879a4 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -128,6 +128,8 @@ o3-form: - components/o3-form/**/* o3-foundation: - components/o3-foundation/**/* +o3-social-sign-in: + - components/o3-social-sign-in/**/* o3-tooltip: - components/o3-tooltip/**/* o3-typography: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ae613b438d..5ac396f824 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -131,6 +131,8 @@ jobs: - 'components/o3-form/**' components/o3-foundation: - 'components/o3-foundation/**' + components/o3-social-sign-in: + - 'components/o3-social-sign-in/**' components/o3-tooltip: - 'components/o3-tooltip/**' components/o3-typography: diff --git a/.release-please-manifest.json b/.release-please-manifest.json index dab215cad6..9c36fcd654 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -55,6 +55,7 @@ "components/o3-editorial-typography": "2.0.0", "components/o3-form": "0.3.2", "components/o3-foundation": "2.1.0", + "components/o3-social-sign-in": "0.0.0", "components/o3-tooltip": "2.0.0", "libraries/ftdomdelegate": "5.0.1", "libraries/math": "1.1.1", diff --git a/components/o3-social-sign-in/.gitignore b/components/o3-social-sign-in/.gitignore new file mode 100644 index 0000000000..5fdd092d20 --- /dev/null +++ b/components/o3-social-sign-in/.gitignore @@ -0,0 +1,10 @@ +.DS_Store +.env +/node_modules/ +/build/ +.idea/ +/coverage +css +!src/css +cjs +esm diff --git a/components/o3-social-sign-in/.npmignore b/components/o3-social-sign-in/.npmignore new file mode 100644 index 0000000000..05bd9619cb --- /dev/null +++ b/components/o3-social-sign-in/.npmignore @@ -0,0 +1,12 @@ +.env +.gitignore +.npmignore +.eslintrc.cjs +.remarkrc.cjs +.prettierrc.toml +.eslintignore +.stylelintignore +stories/ +src/tsx/ +.github/ +test/ diff --git a/components/o3-social-sign-in/README.md b/components/o3-social-sign-in/README.md new file mode 100644 index 0000000000..d996d0e792 --- /dev/null +++ b/components/o3-social-sign-in/README.md @@ -0,0 +1,75 @@ +# o3-social-sign-in + +A button for social sign-in providers. + +- [o3-social-sign-in](#o3-social-sign-in) + - [Markup](#markup) + - [Migration](#migration) + - [Contact](#contact) + - [Licence](#licence) + +## Markup + +o3-social-sign-in supports [JSX templates for React users](#jsx), or direct HTML. We recommend using JSX where possible. + +Two providers are supported: Google and Apple. We recommend you follow their guides to integrate `o3-social-sign-on` to +their sign-in flows: + +* [Displaying Sign in with Apple buttons on the web](https://developer.apple.com/documentation/sign_in_with_apple/displaying_sign_in_with_apple_buttons_on_the_web) +* [Building a custom Google Sign-In button](https://developers.google.com/identity/sign-in/web/build-button) + +```html + + + +``` + +```tsx + + +``` + +When using the TSX component, ids will automatically be set. For Apple sign in, the id is `appleid-signin` and for +Google it is `gSignInWrapper`. + +By default, the TSX component will display the button with default copy. Use the `text` property to customise it: +```tsx + + +``` + +### Properties + +| Property | Values | Description | +|------------|--------------------|----------------------------------------------------------------------------------------------------------------------------------------| +| `provider` | `apple`, `google` | Styles the button according to the sign in provider's design | +| `text` | Any `string` value | (Optional) Lets users override copy with custom content. If no string is provided then `Sign in with ` will display instead. | + +## Migration + +| State | Major Version | Last Minor Release | Migration guide | +|:--------:|:-------------:|:------------------:|:---------------:| +| ✨ active | 1 | N/A | N/A | + +## Contact + +If you have any questions or comments about this component, or need help using it, please +either [raise an issue](https://github.com/Financial-Times/origami/issues), +visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or +email [Origami Support](mailto:origami-support@ft.com). + +--- + +## Licence + +This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT). diff --git a/components/o3-social-sign-in/main.css b/components/o3-social-sign-in/main.css new file mode 100644 index 0000000000..ba5c762110 --- /dev/null +++ b/components/o3-social-sign-in/main.css @@ -0,0 +1,65 @@ +.o3-social-sign-in-button { + --o3-grid-columns-to-span-count: 4; + max-width: var(--o3-grid-columns-to-span-width, 484px); + width: 100%; + min-height: 40px; + padding: 0 var(--o3-spacing-m) 0 var(--o3-spacing-s); + display: inline-flex; + gap: var(--o3-spacing-s); + align-items: center; + justify-content: center; + box-sizing: border-box; + + font-size: var(--o3-font-size-negative-1); + line-height: var(--o3-font-lineheight-negative-1); + font-weight: var(--o3-font-weight-semibold); + font-family: var(--o3-font-family-metric), sans-serif; + + border: 1px solid var(--_o3-social-sign-in-border-color); + text-align: center; + text-decoration: none; + cursor: pointer; + + color: var(--_o3-social-sign-in-color); + background: var(--_o3-social-sign-in-background-color); +} + + +.o3-social-sign-in-button__copy { + margin-right: auto; + margin-left: auto; +} + +.o3-social-sign-in-button--apple { + --_o3-social-sign-in-background-color: var(--o3-color-palette-black); + --_o3-social-sign-in-color: var(--o3-color-palette-white); + --_o3-social-sign-in-border-color: transparrent; +} + +.o3-social-sign-in-button--google { + --_o3-social-sign-in-background-color: var(--o3-color-palette-white); + --_o3-social-sign-in-color: var(--o3-color-palette-black); + --_o3-social-sign-in-border-color: var(--o3-color-palette-black); +} + +.o3-social-sign-in-button::before { + content:''; + + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.o3-social-sign-in-button--google::before { + background-image: url(data:image/svg+xml,%0A%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.8524%206.70764H8.16406V9.87887H12.5574C12.3681%2010.9037%2011.793%2011.7719%2010.9284%2012.3532V14.4103H13.5667C15.1103%2012.983%2016.0008%2010.8813%2016.0008%208.38455C16.0008%207.80322%2015.9489%207.24425%2015.8524%206.70764Z%22%20fill%3D%22%234285F4%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.16413%2016.3964C10.3682%2016.3964%2012.2161%2015.6623%2013.5667%2014.4102L10.9285%2012.3532C10.1975%2012.8451%209.26246%2013.1358%208.16413%2013.1358C6.03797%2013.1358%204.23834%2011.6936%203.59641%209.75586H0.869141V11.8799C2.21237%2014.5593%204.97304%2016.3964%208.16413%2016.3964Z%22%20fill%3D%22%2334A853%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.59555%209.7559C3.43228%209.26401%203.33952%208.73857%203.33952%208.19824C3.33952%207.6579%203.43228%207.13246%203.59555%206.64057V4.51648H0.868275C0.315399%205.62324%200%206.87534%200%208.19824C0%209.52113%200.315399%2010.7732%200.868275%2011.88L3.59555%209.7559Z%22%20fill%3D%22%23FBBC05%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.16413%203.26066C9.36265%203.26066%2010.4387%203.6743%2011.2847%204.48667L13.6261%202.13527C12.2124%200.812371%2010.3645%200%208.16413%200C4.97304%200%202.21237%201.83715%200.869141%204.51649L3.59641%206.64058C4.23834%204.70281%206.03797%203.26066%208.16413%203.26066Z%22%20fill%3D%22%23EA4335%22%2F%3E%0A%3C%2Fsvg%3E%0A); +} + +.o3-social-sign-in-button--apple::before { + background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2014%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.2117%205.45401C13.118%205.52694%2011.4406%206.45157%2011.4406%208.50399C11.4406%2010.8794%2013.5738%2011.7181%2013.6389%2011.7389C13.6285%2011.791%2013.2977%2012.8901%2012.5137%2014.0101C11.8105%2014.9972%2011.0786%2015.9792%209.96381%2015.9792C8.85165%2015.9792%208.56515%2015.3489%207.27848%2015.3489C6.02567%2015.3489%205.58029%2016%204.55929%2016C3.54089%2016%202.82984%2015.0884%202.012%2013.9684C1.06653%2012.6531%200.300781%2010.6085%200.300781%208.67068C0.300781%205.5582%202.37143%203.90949%204.41082%203.90949C5.49173%203.90949%206.39552%204.60492%207.07532%204.60492C7.72126%204.60492%208.73184%203.86782%209.96381%203.86782C10.43%203.86782%2012.1074%203.90949%2013.2117%205.45401ZM9.37778%202.54989C9.88828%201.96126%2010.2477%201.14081%2010.2477%200.320365C10.2477%200.208367%2010.2373%200.0937653%2010.2165%200C9.3882%200.0312551%208.40106%200.53915%207.80721%201.21374C7.34099%201.73205%206.90342%202.54989%206.90342%203.38076C6.90342%203.50578%206.92686%203.6308%206.93467%203.66987C6.98937%203.68029%207.07272%203.6907%207.15867%203.6907C7.90358%203.6907%208.83863%203.20625%209.37778%202.54989Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A); +} + +@media (forced-colors: active) { + .o3-social-sign-in-button > .o3-social-sign-in-button__icon { + display: none; + } +} diff --git a/components/o3-social-sign-in/origami.json b/components/o3-social-sign-in/origami.json new file mode 100644 index 0000000000..2564436360 --- /dev/null +++ b/components/o3-social-sign-in/origami.json @@ -0,0 +1,12 @@ +{ + "origamiType": "component", + "origamiVersion": "3.0", + "brands": ["core", "internal", "whitelabel"], + "support": "https://github.com/Financial-Times/origami/issues/new?labels=o3-social-sign-in,components", + "supportContact": { + "email": "origami.support@ft.com", + "slack": "#origami-support" + }, + "supportStatus": "experimental", + "browserFeatures": {} +} diff --git a/components/o3-social-sign-in/package.json b/components/o3-social-sign-in/package.json new file mode 100644 index 0000000000..ca40b85d24 --- /dev/null +++ b/components/o3-social-sign-in/package.json @@ -0,0 +1,37 @@ +{ + "name": "@financial-times/o3-social-sign-in", + "version": "0.0.0", + "description": "Social sign-in buttons for third party-authentication flows.", + "main": "index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/Financial-Times/origami.git" + }, + "files": [ + "cjs", + "esm", + "css", + "origami.json", + "package.json", + "README.md" + ], + "private": false, + "keywords": [ + "financial-times", + "origami", + "buttons", + "social-sign-in" + ], + "scripts": { + "build": "node ../../apps/dictionary/scripts/build-config/build.js && bash ../../scripts/component/build-o3.bash o3-social-sign-in" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/Financial-Times/origami/issues" + }, + "homepage": "https://github.com/Financial-Times/origami#readme", + "dependencies": { + "@financial-times/o3-foundation": "^2.0.0" + } +} diff --git a/components/o3-social-sign-in/src/css/brands/core.css b/components/o3-social-sign-in/src/css/brands/core.css new file mode 100644 index 0000000000..34141e54c7 --- /dev/null +++ b/components/o3-social-sign-in/src/css/brands/core.css @@ -0,0 +1,2 @@ +@import '@financial-times/o3-foundation/css/core.css'; +@import '../../../main.css'; diff --git a/components/o3-social-sign-in/src/css/brands/internal.css b/components/o3-social-sign-in/src/css/brands/internal.css new file mode 100644 index 0000000000..b8878ef741 --- /dev/null +++ b/components/o3-social-sign-in/src/css/brands/internal.css @@ -0,0 +1,2 @@ +@import '@financial-times/o3-foundation/css/internal.css'; +@import '../../../main.css'; diff --git a/components/o3-social-sign-in/src/css/brands/professional.css b/components/o3-social-sign-in/src/css/brands/professional.css new file mode 100644 index 0000000000..8b605795ff --- /dev/null +++ b/components/o3-social-sign-in/src/css/brands/professional.css @@ -0,0 +1,2 @@ +@import '@financial-times/o3-foundation/css/professional.css'; +@import '../../../main.css'; diff --git a/components/o3-social-sign-in/src/css/brands/sustainable-views.css b/components/o3-social-sign-in/src/css/brands/sustainable-views.css new file mode 100644 index 0000000000..edd76ba442 --- /dev/null +++ b/components/o3-social-sign-in/src/css/brands/sustainable-views.css @@ -0,0 +1,2 @@ +@import '@financial-times/o3-foundation/css/sustainable-views.css'; +@import '../../../main.css'; diff --git a/components/o3-social-sign-in/src/css/brands/whitelabel.css b/components/o3-social-sign-in/src/css/brands/whitelabel.css new file mode 100644 index 0000000000..da6f7ffe6f --- /dev/null +++ b/components/o3-social-sign-in/src/css/brands/whitelabel.css @@ -0,0 +1,2 @@ +@import '@financial-times/o3-foundation/css/whitelabel.css'; +@import '../../../main.css'; diff --git a/components/o3-social-sign-in/src/tsx/socialSignIn.tsx b/components/o3-social-sign-in/src/tsx/socialSignIn.tsx new file mode 100644 index 0000000000..e364af0422 --- /dev/null +++ b/components/o3-social-sign-in/src/tsx/socialSignIn.tsx @@ -0,0 +1,24 @@ +type Provider = 'apple' | 'google'; + +const providerToTitle: Record = { + apple: 'Apple', + google: 'Google', +}; + +export interface SocialSignInProps { + provider: Provider, + text?: string +} + +export const SocialSignIn = (props: SocialSignInProps) => { + const providerId = props.provider === 'apple' ? 'appleid-signin' : 'gSignInWrapper'; + const defaultCopy = `Sign in with ${providerToTitle[props.provider]}` + + return ( + ); +}; \ No newline at end of file diff --git a/components/o3-social-sign-in/stories/core/professional/social-sign-in.stories.tsx b/components/o3-social-sign-in/stories/core/professional/social-sign-in.stories.tsx new file mode 100644 index 0000000000..35aca2b8cd --- /dev/null +++ b/components/o3-social-sign-in/stories/core/professional/social-sign-in.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta} from '@storybook/react'; +import {SocialSignIn as SocialSignInTsx} from '../../../src/tsx/socialSignIn'; +import {SocialSignInStory} from '../../story-templates'; +import links from '@financial-times/o3-figma-sb-links'; +import '../../../src/css/brands/professional.css'; + +export default { + title: 'Core/Professional/o3-social-sign-in', + component: SocialSignInTsx, + tags: ['autodocs'], + decorators: [ + Story => ( +
+
+ +
+
+ ), + ], + parameters: { + backgrounds: {default: 'paper'}, + design: { + type: 'figma', + url: links['core-professional-o3-social-sign-in--social-sign-in-stories'].figma, + }, + }, +} as Meta; + +export const SocialSignInStories = SocialSignInStory; \ No newline at end of file diff --git a/components/o3-social-sign-in/stories/core/social-sign-in.stories.tsx b/components/o3-social-sign-in/stories/core/social-sign-in.stories.tsx new file mode 100644 index 0000000000..79896780ee --- /dev/null +++ b/components/o3-social-sign-in/stories/core/social-sign-in.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta} from '@storybook/react'; +import {SocialSignIn as SocialSignInTsx} from '../../src/tsx/socialSignIn'; +import {SocialSignInStory} from '../story-templates'; +import links from '@financial-times/o3-figma-sb-links'; +import '../../src/css/brands/core.css'; + +export default { + title: 'Core/o3-social-sign-in', + component: SocialSignInTsx, + tags: ['autodocs'], + decorators: [ + Story => ( +
+
+ +
+
+ ), + ], + parameters: { + backgrounds: {default: 'paper'}, + design: { + type: 'figma', + url: links['core-o3-social-sign-in--social-sign-in-stories'].figma, + }, + }, +} as Meta; + +export const SocialSignInStories = SocialSignInStory; \ No newline at end of file diff --git a/components/o3-social-sign-in/stories/story-templates.tsx b/components/o3-social-sign-in/stories/story-templates.tsx new file mode 100644 index 0000000000..1b9eb4361b --- /dev/null +++ b/components/o3-social-sign-in/stories/story-templates.tsx @@ -0,0 +1,8 @@ +import {SocialSignIn, SocialSignInProps} from '../src/tsx/socialSignIn'; + +export const SocialSignInStory ={ + args: { + provider: 'apple', + }, + render: (props: SocialSignInProps) => +} \ No newline at end of file diff --git a/components/o3-social-sign-in/stories/sustainable-views/social-sign-in.stories.tsx b/components/o3-social-sign-in/stories/sustainable-views/social-sign-in.stories.tsx new file mode 100644 index 0000000000..a7f60c539e --- /dev/null +++ b/components/o3-social-sign-in/stories/sustainable-views/social-sign-in.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta} from '@storybook/react'; +import {SocialSignIn as SocialSignInTsx} from '../../src/tsx/socialSignIn'; +import {SocialSignInStory} from '../story-templates'; +import links from '@financial-times/o3-figma-sb-links'; +import '../../src/css/brands/sustainable-views.css'; + +export default { + title: 'Sustainable Views/o3-social-sign-in', + component: SocialSignInTsx, + tags: ['autodocs'], + decorators: [ + Story => ( +
+
+ +
+
+ ), + ], + parameters: { + backgrounds: {default: 'paper'}, + design: { + type: 'figma', + url: links['sustainable-views-o3-social-sign-in--social-sign-in-stories'].figma, + }, + }, +} as Meta; + +export const SocialSignInStories = SocialSignInStory; \ No newline at end of file diff --git a/components/o3-social-sign-in/stories/whitelabel/social-sign-in.stories.tsx b/components/o3-social-sign-in/stories/whitelabel/social-sign-in.stories.tsx new file mode 100644 index 0000000000..74d0e0f520 --- /dev/null +++ b/components/o3-social-sign-in/stories/whitelabel/social-sign-in.stories.tsx @@ -0,0 +1,29 @@ +import type {Meta} from '@storybook/react'; +import {SocialSignIn as SocialSignInTsx} from '../../src/tsx/socialSignIn'; +import {SocialSignInStory} from '../story-templates'; +import links from '@financial-times/o3-figma-sb-links'; +import '../../src/css/brands/whitelabel.css'; + +export default { + title: 'Whitelabel/o3-social-sign-in', + component: SocialSignInTsx, + tags: ['autodocs'], + decorators: [ + Story => ( +
+
+ +
+
+ ), + ], + parameters: { + backgrounds: {default: 'paper'}, + design: { + type: 'figma', + url: links['whitelabel-o3-social-sign-in--social-sign-in-stories'].figma, + }, + }, +} as Meta; + +export const SocialSignInStories = SocialSignInStory; \ No newline at end of file diff --git a/components/o3-social-sign-in/tsconfig.json b/components/o3-social-sign-in/tsconfig.json new file mode 100644 index 0000000000..1864d58c15 --- /dev/null +++ b/components/o3-social-sign-in/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/libraries/o3-figma-sb-links/src/figma-links.json b/libraries/o3-figma-sb-links/src/figma-links.json index 35d15cc111..00f3154ccb 100644 --- a/libraries/o3-figma-sb-links/src/figma-links.json +++ b/libraries/o3-figma-sb-links/src/figma-links.json @@ -27,6 +27,7 @@ "core-o3-foundation-o3-typography-link--links": "https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Origami-(o3)?node-id=6519-6425&t=58TFgNdha3aoeQtE-4", "core-o3-foundation-o3-typography-orderedlist--ordered-list-story": "https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Origami-(o3)?node-id=7532-3257&t=58TFgNdha3aoeQtE-4", "core-o3-foundation-o3-typography-unorderedlist--unordered-list-story": "https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Origami-(o3)?node-id=7532-3257&t=58TFgNdha3aoeQtE-4", + "core-o3-social-sign-in--social-sign-in-stories": "https://www.figma.com/design/daVzwmvTLKAPf9cf9dU2Bj/o3-button-sso?node-id=8266-485&t=w4QaZHJHIWOdLdZG-4", "core-o3-tooltip--onboarding-tooltip": "https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Origami-(o3)?node-id=6660-336&t=58TFgNdha3aoeQtE-4", "core-o3-tooltip--toggle-tooltip": "https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core---Origami-(o3)?node-id=6660-395&t=58TFgNdha3aoeQtE-4", "core-professional-o3-button--button": "https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=3604-103&t=uSXzpLGDcxFzfDex-0", @@ -53,6 +54,7 @@ "core-professional-o3-foundation-o3-typography-link--links": "https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=4161-379&t=uSXzpLGDcxFzfDex-4", "core-professional-o3-foundation-o3-typography-orderedlist--ordered-list-story": "https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=4287-213&t=uSXzpLGDcxFzfDex-4", "core-professional-o3-foundation-o3-typography-unorderedlist--unordered-list-story": "https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=4287-213&t=uSXzpLGDcxFzfDex-4", + "core-professional-o3-social-sign-in--social-sign-in-stories": "https://www.figma.com/design/daVzwmvTLKAPf9cf9dU2Bj/o3-button-sso?node-id=8266-485&t=w4QaZHJHIWOdLdZG-4", "core-professional-o3-tooltip--onboarding-tooltip": "https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=4200-365&t=uSXzpLGDcxFzfDex-4", "core-professional-o3-tooltip--toggle-tooltip": "https://www.figma.com/design/qfi6fTq5V05b0mnXw3F7q5/%F0%9F%92%A0-Professional---Origami-(o3)?node-id=4200-424&t=uSXzpLGDcxFzfDex-4", "internal-o3-button--button": "https://www.figma.com/design/H9vTWZgEzqzTtX689nwq4R/%F0%9F%92%A0-Internal---Origami-(o3)?node-id=2819-133&t=uSXzpLGDcxFzfDex-0", @@ -100,6 +102,7 @@ "sustainable-views-o3-foundation-o3-typography-link--link": "https://www.figma.com/design/Y7u0SwIJ1mCNDE0dpzgHCJ/%F0%9F%92%A0-Sustainable-Views---Origami-(o3)?node-id=6648-329&t=T6WBB5s5ODUcvHqu-4", "sustainable-views-o3-foundation-o3-typography-orderedlist--ordered-list-story": "", "sustainable-views-o3-foundation-o3-typography-unorderedlist--unordered-list-story": "", + "sustainable-views-o3-social-sign-in--social-sign-in-stories": "https://www.figma.com/design/daVzwmvTLKAPf9cf9dU2Bj/o3-button-sso?node-id=8266-485&t=w4QaZHJHIWOdLdZG-4", "sustainable-views-o3-tooltip--onboarding-tooltip": "https://www.figma.com/design/Y7u0SwIJ1mCNDE0dpzgHCJ/%F0%9F%92%A0-Sustainable-Views---Origami-(o3)?node-id=6318-414&t=jZcQ882g8fhmd6uu-4", "sustainable-views-o3-tooltip--toggle-tooltip": "https://www.figma.com/design/Y7u0SwIJ1mCNDE0dpzgHCJ/%F0%9F%92%A0-Sustainable-Views---Origami-(o3)?node-id=6318-473&t=jZcQ882g8fhmd6uu-4", "sustainable-views-o3-typography-orderedlist--ordered-list-story": "", @@ -138,6 +141,7 @@ "whitelabel-o3-foundation-o3-typography-link--link": "https://www.figma.com/design/5ATknbGociZMlnNXX4sy4f/Whitelabel---Origami-(o3)?node-id=5133-1523&t=uSXzpLGDcxFzfDex-4", "whitelabel-o3-foundation-o3-typography-orderedlist--ordered-list-story": "https://www.figma.com/design/5ATknbGociZMlnNXX4sy4f/Whitelabel---Origami-(o3)?node-id=5851-969&t=uSXzpLGDcxFzfDex-4", "whitelabel-o3-foundation-o3-typography-unorderedlist--unordered-list-story": "https://www.figma.com/design/5ATknbGociZMlnNXX4sy4f/Whitelabel---Origami-(o3)?node-id=5851-969&t=uSXzpLGDcxFzfDex-4", + "whitelabel-o3-social-sign-in--social-sign-in-stories": "https://www.figma.com/design/daVzwmvTLKAPf9cf9dU2Bj/o3-button-sso?node-id=8266-485&t=w4QaZHJHIWOdLdZG-4", "whitelabel-o3-tooltip--onboarding-tooltip": "https://www.figma.com/design/5ATknbGociZMlnNXX4sy4f/Whitelabel---Origami-(o3)?node-id=4036-1844&t=uSXzpLGDcxFzfDex-4", "whitelabel-o3-tooltip--toggle-tooltip": "https://www.figma.com/design/5ATknbGociZMlnNXX4sy4f/Whitelabel---Origami-(o3)?node-id=4433-581&t=uSXzpLGDcxFzfDex-4" } \ No newline at end of file diff --git a/libraries/o3-figma-sb-links/src/links.json b/libraries/o3-figma-sb-links/src/links.json index 71b82dd3dc..d97d40a476 100644 --- a/libraries/o3-figma-sb-links/src/links.json +++ b/libraries/o3-figma-sb-links/src/links.json @@ -113,6 +113,10 @@ "core-o3-grid--grid": { "sb": "?path=/story/core-o3-grid--grid" }, + "core-o3-social-sign-in--social-sign-in-stories": { + "sb": "?path=/story/core-o3-social-sign-in--social-sign-in-stories", + "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FdaVzwmvTLKAPf9cf9dU2Bj%2Fo3-button-sso%3Fnode-id%3D8266-485%26t%3Dw4QaZHJHIWOdLdZG-4" + }, "core-o3-tooltip--onboarding-tooltip": { "sb": "?path=/story/core-o3-tooltip--onboarding-tooltip", "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FVVM0PixrY3IRZq2ZUTdWfU%2F%25F0%259F%2592%25A0-Core---Origami-(o3)%3Fnode-id%3D6660-336%26t%3D58TFgNdha3aoeQtE-4" @@ -251,6 +255,10 @@ "core-professional-o3-grid--grid": { "sb": "?path=/story/core-professional-o3-grid--grid" }, + "core-professional-o3-social-sign-in--social-sign-in-stories": { + "sb": "?path=/story/core-professional-o3-social-sign-in--social-sign-in-stories", + "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FdaVzwmvTLKAPf9cf9dU2Bj%2Fo3-button-sso%3Fnode-id%3D8266-485%26t%3Dw4QaZHJHIWOdLdZG-4" + }, "core-professional-o3-tooltip--onboarding-tooltip": { "sb": "?path=/story/core-professional-o3-tooltip--onboarding-tooltip", "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2Fqfi6fTq5V05b0mnXw3F7q5%2F%25F0%259F%2592%25A0-Professional---Origami-(o3)%3Fnode-id%3D4200-365%26t%3DuSXzpLGDcxFzfDex-4" @@ -506,6 +514,10 @@ "sustainable-views-o3-grid--grid": { "sb": "?path=/story/sustainable-views-o3-grid--grid" }, + "sustainable-views-o3-social-sign-in--social-sign-in-stories": { + "sb": "?path=/story/sustainable-views-o3-social-sign-in--social-sign-in-stories", + "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FdaVzwmvTLKAPf9cf9dU2Bj%2Fo3-button-sso%3Fnode-id%3D8266-485%26t%3Dw4QaZHJHIWOdLdZG-4" + }, "sustainable-views-o3-tooltip--onboarding-tooltip": { "sb": "?path=/story/sustainable-views-o3-tooltip--onboarding-tooltip", "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FY7u0SwIJ1mCNDE0dpzgHCJ%2F%25F0%259F%2592%25A0-Sustainable-Views---Origami-(o3)%3Fnode-id%3D6318-414%26t%3DjZcQ882g8fhmd6uu-4" @@ -684,6 +696,10 @@ "whitelabel-o3-grid--grid": { "sb": "?path=/story/whitelabel-o3-grid--grid" }, + "whitelabel-o3-social-sign-in--social-sign-in-stories": { + "sb": "?path=/story/whitelabel-o3-social-sign-in--social-sign-in-stories", + "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FdaVzwmvTLKAPf9cf9dU2Bj%2Fo3-button-sso%3Fnode-id%3D8266-485%26t%3Dw4QaZHJHIWOdLdZG-4" + }, "whitelabel-o3-tooltip--onboarding-tooltip": { "sb": "?path=/story/whitelabel-o3-tooltip--onboarding-tooltip", "figma": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F5ATknbGociZMlnNXX4sy4f%2FWhitelabel---Origami-(o3)%3Fnode-id%3D4036-1844%26t%3DuSXzpLGDcxFzfDex-4" diff --git a/libraries/o3-figma-sb-links/src/sb-links.json b/libraries/o3-figma-sb-links/src/sb-links.json index 85a993ecec..44b50e31fa 100644 --- a/libraries/o3-figma-sb-links/src/sb-links.json +++ b/libraries/o3-figma-sb-links/src/sb-links.json @@ -144,5 +144,9 @@ "whitelabel-o3-foundation-o3-typography-link--link": "?path=/story/whitelabel-o3-foundation-o3-typography-link--link", "whitelabel-o3-foundation-o3-typography-orderedlist--ordered-list-story": "?path=/story/whitelabel-o3-foundation-o3-typography-orderedlist--ordered-list-story", "whitelabel-o3-foundation-o3-typography-unorderedlist--unordered-list-story": "?path=/story/whitelabel-o3-foundation-o3-typography-unorderedlist--unordered-list-story", - "whitelabel-o3-foundation-o3-typography--wrapper-story": "?path=/story/whitelabel-o3-foundation-o3-typography--wrapper-story" + "whitelabel-o3-foundation-o3-typography--wrapper-story": "?path=/story/whitelabel-o3-foundation-o3-typography--wrapper-story", + "core-professional-o3-social-sign-in--social-sign-in-stories": "?path=/story/core-professional-o3-social-sign-in--social-sign-in-stories", + "core-o3-social-sign-in--social-sign-in-stories": "?path=/story/core-o3-social-sign-in--social-sign-in-stories", + "sustainable-views-o3-social-sign-in--social-sign-in-stories": "?path=/story/sustainable-views-o3-social-sign-in--social-sign-in-stories", + "whitelabel-o3-social-sign-in--social-sign-in-stories": "?path=/story/whitelabel-o3-social-sign-in--social-sign-in-stories" } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1d7fee624d..8b12ccc9f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3237,7 +3237,7 @@ }, "components/o-header": { "name": "@financial-times/o-header", - "version": "14.0.3", + "version": "14.0.4", "license": "MIT", "devDependencies": { "@financial-times/o-fonts": "^5.2.0", @@ -3916,6 +3916,14 @@ "npm": ">7" } }, + "components/o3-social-sign-in": { + "name": "@financial-times/o3-social-sign-in", + "version": "0.0.0", + "license": "ISC", + "dependencies": { + "@financial-times/o3-foundation": "^2.0.0" + } + }, "components/o3-tooltip": { "name": "@financial-times/o3-tooltip", "version": "2.0.0", @@ -11706,6 +11714,10 @@ "resolved": "components/o3-foundation", "link": true }, + "node_modules/@financial-times/o3-social-sign-in": { + "resolved": "components/o3-social-sign-in", + "link": true + }, "node_modules/@financial-times/o3-tooling-token": { "resolved": "libraries/o3-tooling-token", "link": true diff --git a/release-please-config.json b/release-please-config.json index f5df19a895..8b07e56030 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -58,6 +58,7 @@ "components/o3-editorial-typography": {}, "components/o3-form": {}, "components/o3-foundation": {}, + "components/o3-social-sign-in": {}, "components/o3-tooltip": {}, "libraries/ftdomdelegate": {}, "libraries/math": {},