-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: introduce o3-social-sign-in button
* feat: introduce o3-social-sign-in button * feat: provide id for sign-in libraries to hook into * docs: introduce readme * chore: update package-lock.json * chore: update package-lock.json * chore: regenerate ci scripts * fix: icon hangs to left * fix: ensure min width adhere's to apple's guidelines * fix: allow variation in copy * fix: amend padding * fix: remove test script * chore: use button instead of anchor * chore: use o3-foundation * chore: use branded approach to provide css * chore: build and export * docs: Update components/o3-social-sign-in/README.md Co-authored-by: Lee Moody <[email protected]> * chore: space icons evenly * chore: hide icon from voice over * chore: hide icon when in high contrast mode * chore: reduce css custom properties * chore: set button max width to 4 cols in grid * chore: ensure icon size is calculated * chore: display icons as background image * chore: display icons as background image * chore: correct size of icons * chore: reduce lines of css * chore: use content instead of span for icon * feat: allow users to pass in their own copy * docs: show story for other supported brands * docs: Update components/o3-social-sign-in/README.md Co-authored-by: Lee Moody <[email protected]> * docs: link to figma designs * feat: make text optional, update readme * Update components/o3-social-sign-in/README.md Co-authored-by: Lee Moody <[email protected]> * feat: add z-index values to o3 (#1827) To remove `nUiZIndexFor` we would like Origami guidance on z-index. https://github.com/Financial-Times/n-ui-foundations/blob/3bb178d96bc4873514a2d48ca4df8453c17b29a6/util/_mixins.scss#L21 * chore: release main (#1828) --------- Co-authored-by: Lee Moody <[email protected]>
- Loading branch information
Showing
26 changed files
with
416 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .DS_Store | ||
| .env | ||
| /node_modules/ | ||
| /build/ | ||
| .idea/ | ||
| /coverage | ||
| css | ||
| !src/css | ||
| cjs | ||
| esm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| .env | ||
| .gitignore | ||
| .npmignore | ||
| .eslintrc.cjs | ||
| .remarkrc.cjs | ||
| .prettierrc.toml | ||
| .eslintignore | ||
| .stylelintignore | ||
| stories/ | ||
| src/tsx/ | ||
| .github/ | ||
| test/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
||
| <button | ||
| id="appleid-signin" | ||
| class="o3-social-sign-in-button o3-social-sign-in-button--apple" | ||
| > | ||
| <span class="o3-social-sign-in-button__copy">Sign in with Apple</span> | ||
| </button> | ||
| <button | ||
| id="gSignInWrapper" | ||
| class="o3-social-sign-in-button o3-social-sign-in-button--google" | ||
| > | ||
| <span class="o3-social-sign-in-button__copy">Sign in with Google</span> | ||
| </button> | ||
| ``` | ||
|
|
||
| ```tsx | ||
| <SocialSignIn provider="apple" /> | ||
| <SocialSignIn provider="google" /> | ||
| ``` | ||
|
|
||
| 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 | ||
| <SocialSignIn provider="apple" text="Register with Apple" /> | ||
| <SocialSignIn provider="google" text="Register with Google" /> | ||
| ``` | ||
|
|
||
| ### 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 <provider>` 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:[email protected]). | ||
|
|
||
| --- | ||
|
|
||
| ## Licence | ||
|
|
||
| This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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": "[email protected]", | ||
| "slack": "#origami-support" | ||
| }, | ||
| "supportStatus": "experimental", | ||
| "browserFeatures": {} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import '@financial-times/o3-foundation/css/core.css'; | ||
| @import '../../../main.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import '@financial-times/o3-foundation/css/internal.css'; | ||
| @import '../../../main.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import '@financial-times/o3-foundation/css/professional.css'; | ||
| @import '../../../main.css'; |
2 changes: 2 additions & 0 deletions
2
components/o3-social-sign-in/src/css/brands/sustainable-views.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import '@financial-times/o3-foundation/css/sustainable-views.css'; | ||
| @import '../../../main.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import '@financial-times/o3-foundation/css/whitelabel.css'; | ||
| @import '../../../main.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| type Provider = 'apple' | 'google'; | ||
|
|
||
| const providerToTitle: Record<Provider, string> = { | ||
| 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 ( | ||
| <button id={providerId} className={`o3-social-sign-in-button o3-social-sign-in-button--${props.provider}`}> | ||
| <span | ||
| className="o3-social-sign-in-button__copy"> | ||
| {props.text ? props.text : defaultCopy} | ||
| </span> | ||
| </button>); | ||
| }; |
29 changes: 29 additions & 0 deletions
29
components/o3-social-sign-in/stories/core/professional/social-sign-in.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 => ( | ||
| <div data-o3-brand="professional" className="o3-grid"> | ||
| <div style={{gridColumn: 'content-start / content-end'}}> | ||
| <Story /> | ||
| </div> | ||
| </div> | ||
| ), | ||
| ], | ||
| 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; |
29 changes: 29 additions & 0 deletions
29
components/o3-social-sign-in/stories/core/social-sign-in.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 => ( | ||
| <div data-o3-brand="core" className="o3-grid"> | ||
| <div style={{gridColumn: 'content-start / content-end'}}> | ||
| <Story /> | ||
| </div> | ||
| </div> | ||
| ), | ||
| ], | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import {SocialSignIn, SocialSignInProps} from '../src/tsx/socialSignIn'; | ||
|
|
||
| export const SocialSignInStory ={ | ||
| args: { | ||
| provider: 'apple', | ||
| }, | ||
| render: (props: SocialSignInProps) => <SocialSignIn {...props }/> | ||
| } |
29 changes: 29 additions & 0 deletions
29
components/o3-social-sign-in/stories/sustainable-views/social-sign-in.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 => ( | ||
| <div data-o3-brand="sustainable-views" className="o3-grid"> | ||
| <div style={{gridColumn: 'content-start / content-end'}}> | ||
| <Story /> | ||
| </div> | ||
| </div> | ||
| ), | ||
| ], | ||
| 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; |
Oops, something went wrong.