Skip to content

Commit

Permalink
refactor(Slug): refactor Slug callout into composable components (car…
Browse files Browse the repository at this point in the history 
…bon-design-system#15036)

* feat(Slug): scaffold out AI Slug component

* feat(slug): add gradient tokens to themes, hover styles

* feat(slug): add focus styles, cleanup storybook

* fix(Theme): adjust small slug hover tokens

* feat(Slug): add hollow slug

* feat(Slug): initial inline styles

* chore(snapshot): update snapshots

* feat(Slug): add inline styles

* fix(Slug): refactor inline variant

* style(Slug): tweak inline styles

* style(Slug): add hover styles to inline variant

* style(Slug): add initial callout styles

* style(Slug): tokenize gradients

* style(Slug): adjust padding

* chore: udpate snapshots

* style(Slug): adjust padding with hollow dot, fix text colors

* fix(Slug): fix hover styles when focused

* refactor(Slug): remove ai from prefix

* refactor(Slug): break Slug callout into composable components

* style(Slug): add styles for action bar

* chore(storybook): update stories to use SlugContent, SlugToolbar

* refactor(Slug): rename SlugToolbar to SlugActions

* chore(storybook): remove console.log

* chore(storybook): add storybook toggle to show / hide action bar

---------

Co-authored-by: Andrea N. Cardona <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
  • Loading branch information
@tw15egan @andreancardona @tay1orjones
3 people committed Nov 1, 2023
1 parent cc34d1f commit 7dcb02e
Show file tree
Hide file tree
Showing 4 changed files with 508 additions and 80 deletions.
357 changes: 283 additions & 74 deletions packages/react/src/components/Slug/Slug.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@

import React from 'react';

import Slug from '.';
import { Slug, SlugContent, SlugActions } from '.';
import { View, FolderOpen, Folders } from '@carbon/icons-react';
import Button from '../Button';
import { IconButton } from '../IconButton';
import mdx from './Slug.mdx';
import './slug-story.scss';

Expand Down Expand Up @@ -44,105 +46,312 @@ const content = <span>AI was used to generate this content</span>;
export const Default = () => (
<>
<div className="slug-container">
<Slug autoAlign size="mini" slugContent={aiContent} />
<Slug autoAlign size="2xs" slugContent={aiContent} />
<Slug autoAlign size="xs" slugContent={aiContent} />
<Slug autoAlign size="sm" slugContent={aiContent} />
<Slug autoAlign size="md" slugContent={aiContent} />
<Slug autoAlign size="lg" slugContent={aiContent} />
<Slug autoAlign size="xl" slugContent={aiContent} />
<Slug autoAlign size="mini">
<SlugContent>{aiContent}</SlugContent>
</Slug>
<Slug autoAlign size="2xs">
<SlugContent>{aiContent}</SlugContent>
</Slug>
<Slug autoAlign size="xs">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign size="sm">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign size="md">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign size="lg">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign size="xl">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
</div>
<div className="slug-container">
<Slug kind="hollow" autoAlign size="mini" slugContent={content} />
<Slug kind="hollow" autoAlign size="2xs" slugContent={content} />
<Slug kind="hollow" autoAlign size="xs" slugContent={content} />
<Slug kind="hollow" autoAlign size="mini">
<SlugContent>{content}</SlugContent>
</Slug>
<Slug kind="hollow" autoAlign size="2xs">
<SlugContent>{content}</SlugContent>
</Slug>
<Slug kind="hollow" autoAlign size="xs">
<SlugContent>{content}</SlugContent>
</Slug>
</div>
<div className="slug-container">
<Slug autoAlign kind="inline" size="sm" slugContent={aiContent} />
<Slug autoAlign kind="inline" size="md" slugContent={aiContent} />
<Slug autoAlign kind="inline" size="lg" slugContent={aiContent} />
<Slug autoAlign kind="inline" size="sm">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign kind="inline" size="md">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign kind="inline" size="lg">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
</div>
<div className="slug-container">
<Slug
autoAlign
kind="inline"
size="sm"
aiTextLabel="Text goes here"
slugContent={aiContent}
/>
<Slug
autoAlign
kind="inline"
size="md"
aiTextLabel="Text goes here"
slugContent={aiContent}
/>
<Slug
autoAlign
kind="inline"
size="lg"
aiTextLabel="Text goes here"
slugContent={aiContent}
/>
<Slug autoAlign kind="inline" size="sm" aiTextLabel="Text goes here">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign kind="inline" size="md" aiTextLabel="Text goes here">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
<Slug autoAlign kind="inline" size="lg" aiTextLabel="Text goes here">
<SlugContent>
{aiContent}
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
</SlugContent>
</Slug>
</div>
<div className="slug-container">
<Slug
autoAlign
kind="inline"
dotType="hollow"
size="sm"
slugContent={content}
/>
<Slug
autoAlign
kind="inline"
dotType="hollow"
size="md"
slugContent={content}
/>
<Slug
autoAlign
kind="inline"
dotType="hollow"
size="lg"
slugContent={content}
/>
<Slug autoAlign kind="inline" dotType="hollow" size="sm">
<SlugContent>{content}</SlugContent>
</Slug>
<Slug autoAlign kind="inline" dotType="hollow" size="md">
<SlugContent>{content}</SlugContent>
</Slug>
<Slug autoAlign kind="inline" dotType="hollow" size="lg">
<SlugContent>{content}</SlugContent>
</Slug>
</div>
<div className="slug-container">
<Slug
autoAlign
kind="inline"
dotType="hollow"
size="sm"
aiTextLabel="Text goes here"
slugContent={content}
/>
aiTextLabel="Text goes here">
<SlugContent>{content}</SlugContent>
</Slug>
<Slug
autoAlign
kind="inline"
dotType="hollow"
size="md"
aiTextLabel="Text goes here"
slugContent={content}
/>
aiTextLabel="Text goes here">
<SlugContent>{content}</SlugContent>
</Slug>
<Slug
autoAlign
kind="inline"
dotType="hollow"
size="lg"
aiTextLabel="Text goes here"
slugContent={content}
/>
aiTextLabel="Text goes here">
<SlugContent>{content}</SlugContent>
</Slug>
</div>
</>
);

export const Playground = (args) => (
<>
<div className="slug-container">
<Slug autoAlign slugContent={aiContent} {...args} />
</div>
<Button>Test</Button>
<Button kind="danger">Test</Button>
</>
);
export const Playground = (args) => {
const { kind, dotType, showSlugActions = true } = args;

let renderedContent;
if (kind === 'hollow' || dotType === 'hollow') {
renderedContent = content;
} else {
renderedContent = (
<>
<div>
<p className="secondary">AI Explained</p>
<h1>84%</h1>
<p className="secondary bold">Confidence score</p>
<p className="secondary">
Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
</p>
<hr />
<p className="secondary">Model type</p>
<p className="bold">Foundation model</p>
</div>
{showSlugActions && (
<SlugActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
<IconButton kind="ghost" label="Open Folder">
<FolderOpen />
</IconButton>
<IconButton kind="ghost" label="Folders">
<Folders />
</IconButton>
<Button>View literature</Button>
</SlugActions>
)}
</>
);
}

return (
<>
<div className="slug-container">
<Slug autoAlign {...args}>
<SlugContent>{renderedContent}</SlugContent>
</Slug>
</div>
<Button>Test</Button>
<Button kind="danger">Test</Button>
</>
);
};

Playground.argTypes = {
showSlugActions: {
control: {
type: 'boolean',
},
description: 'Playground only - toggle to show the callout toolbar',
},
};
Loading

0 comments on commit 7dcb02e

Please sign in to comment.