Skip to content

Commit

Permalink
♿ CopyButton now tells SR what you are copying (#3455)
Browse files Browse the repository at this point in the history 
* ♿ CopyButton now tells SR what you are copying

* ♻️ Re-use sanitized name for semantic copybutton
  • Loading branch information
@KenAJoh
KenAJoh authored Dec 13, 2024
1 parent 2e476ef commit 88dc43b
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 58 deletions.
6 changes: 5 additions & 1 deletion aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ export const GlobalView = ({ cat }: { cat: string }) => {
<span className="flex min-h-8 items-center">
{sanitizeName(x.name)}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={x.name}
title={`${sanitizeName(x.name)} kopier`}
size="small"
/>
</dt>

<dd className="mt-auto text-medium text-text-subtle">
Expand Down
163 changes: 110 additions & 53 deletions aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,23 @@ export const SemanticView = ({ cat }: { cat: string }) => {
if (cat.startsWith("semantic-text")) {
return (
<Grid>
{colors.map((x) => {
const ref = getGlobalReference(x.value);
const c = color(x.value);
{colors.map((token) => {
const ref = getGlobalReference(token.value);
const c = color(token.value);
const isLight = c.getLuminance() > 0.9;

const sanitizedName = sanitizeName(token.name.replace("text-", ""));

return (
<div key={x.name} id={x.name} className="flex w-fit items-center">
<div
key={token.name}
id={token.name}
className="flex w-fit items-center"
>
<div
style={{
background: isLight ? `var(--a-surface-inverted)` : undefined,
color: x.value,
color: token.value,
boxShadow: `inset 0 2px 4px 0 rgba(0,0,0,0.06)`,
}}
className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-2xl leading-none"
Expand All @@ -32,9 +38,13 @@ export const SemanticView = ({ cat }: { cat: string }) => {
<dl>
<dt className="inline-flex items-start gap-1 text-medium">
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("text-", ""))}
{sanitizedName}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={token.name}
title={`${sanitizedName} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{ref ? (
Expand All @@ -45,7 +55,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
{sanitizeName(ref.name)}
</Link>
) : (
getColorString(x.value)
getColorString(token.value)
)}
</dd>
</dl>
Expand All @@ -58,12 +68,19 @@ export const SemanticView = ({ cat }: { cat: string }) => {
if (cat.startsWith("semantic-icon")) {
return (
<Grid>
{colors.map((x) => {
const ref = getGlobalReference(x.value);
const c = color(x.value);
{colors.map((token) => {
const ref = getGlobalReference(token.value);
const c = color(token.value);
const isLight = c.getLuminance() > 0.9;

const sanitizedName = sanitizeName(token.name.replace("icon-", ""));

return (
<div key={x.name} id={x.name} className="flex w-fit items-center">
<div
key={token.name}
id={token.name}
className="flex w-fit items-center"
>
<div
style={{
background: isLight ? `var(--a-surface-inverted)` : undefined,
Expand All @@ -74,16 +91,20 @@ export const SemanticView = ({ cat }: { cat: string }) => {
<PersonCircleIcon
aria-hidden
style={{
color: x.value,
color: token.value,
}}
/>
</div>
<dl>
<dt className="inline-flex items-start gap-1 text-medium">
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("icon-", ""))}
{sanitizedName}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={token.name}
title={`${sanitizedName} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{ref ? (
Expand All @@ -94,7 +115,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
{sanitizeName(ref.name)}
</Link>
) : (
getColorString(x.value)
getColorString(token.value)
)}
</dd>
</dl>
Expand All @@ -108,23 +129,33 @@ export const SemanticView = ({ cat }: { cat: string }) => {
if (cat.startsWith("semantic-border")) {
return (
<Grid>
{colors.map((x) => {
const ref = getGlobalReference(x.value);
{colors.map((token) => {
const ref = getGlobalReference(token.value);

const sanitizedName = sanitizeName(token.name.replace("border-", ""));

return (
<div key={x.name} id={x.name} className="flex w-fit items-center">
<div
key={token.name}
id={token.name}
className="flex w-fit items-center"
>
<div
style={{
boxShadow: `inset 0 0 0 3px var(${x.name})`,
boxShadow: `inset 0 0 0 3px var(${token.name})`,
}}
className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
/>
<dl>
<dt className="inline-flex items-start gap-1 text-medium">
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("border-", ""))}
{sanitizedName}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={token.name}
title={`${sanitizedName} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{ref ? (
Expand All @@ -135,7 +166,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
{sanitizeName(ref.name)}
</Link>
) : (
getColorString(x.value)
getColorString(token.value)
)}
</dd>
</dl>
Expand All @@ -148,21 +179,25 @@ export const SemanticView = ({ cat }: { cat: string }) => {
if (cat.startsWith("semantic-data-border")) {
return (
<Grid>
{colors.map((x) => {
const ref = getGlobalReference(x.value);
{colors.map((token) => {
const ref = getGlobalReference(token.value);

const sanitizedName = sanitizeName(
token.name.replace("surface-", ""),
);

return (
<div
key={x.name}
id={x.name}
key={token.name}
id={token.name}
className="z-0 flex w-fit items-center"
>
<div className="mr-3 flex h-16 w-16 items-end justify-evenly rounded-lg text-4xl leading-none">
<span
className="h-full w-3 rounded-t-small"
style={{
border: `1px solid var(${x.name})`,
backgroundColor: `var(${x.name.replace(
border: `1px solid var(${token.name})`,
backgroundColor: `var(${token.name.replace(
"border",
"surface",
)}-subtle)`,
Expand All @@ -171,8 +206,8 @@ export const SemanticView = ({ cat }: { cat: string }) => {
<span
className="h-2/4 w-3 rounded-t-small"
style={{
border: `1px solid var(${x.name})`,
backgroundColor: `var(${x.name.replace(
border: `1px solid var(${token.name})`,
backgroundColor: `var(${token.name.replace(
"border",
"surface",
)}-subtle)`,
Expand All @@ -181,8 +216,8 @@ export const SemanticView = ({ cat }: { cat: string }) => {
<span
className="h-2/3 w-3 rounded-t-small"
style={{
border: `1px solid var(${x.name})`,
backgroundColor: `var(${x.name.replace(
border: `1px solid var(${token.name})`,
backgroundColor: `var(${token.name.replace(
"border",
"surface",
)}-subtle)`,
Expand All @@ -192,9 +227,13 @@ export const SemanticView = ({ cat }: { cat: string }) => {
<dl>
<dt className="inline-flex items-start gap-1 text-medium">
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("surface-", ""))}
{sanitizedName}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={token.name}
title={`${sanitizedName} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{ref ? (
Expand All @@ -205,7 +244,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
{sanitizeName(ref.name)}
</Link>
) : (
getColorString(x.value)
getColorString(token.value)
)}
</dd>
</dl>
Expand All @@ -218,35 +257,43 @@ export const SemanticView = ({ cat }: { cat: string }) => {
if (cat.startsWith("semantic-data-surface")) {
return (
<Grid>
{colors.map((x) => {
const ref = getGlobalReference(x.value);
{colors.map((token) => {
const ref = getGlobalReference(token.value);

const sanitizedName = sanitizeName(
token.name.replace("surface-", ""),
);

return (
<div
key={x.name}
id={x.name}
key={token.name}
id={token.name}
className="z-0 flex w-fit items-center"
>
<div className="mr-3 flex h-16 w-16 items-end justify-evenly rounded-lg text-4xl leading-none">
<span
className="h-full w-3 rounded-t-small"
style={{ backgroundColor: `var(${x.name})` }}
style={{ backgroundColor: `var(${token.name})` }}
/>
<span
className="h-2/4 w-3 rounded-t-small"
style={{ backgroundColor: `var(${x.name})` }}
style={{ backgroundColor: `var(${token.name})` }}
/>
<span
className="h-2/3 w-3 rounded-t-small"
style={{ backgroundColor: `var(${x.name})` }}
style={{ backgroundColor: `var(${token.name})` }}
/>
</div>
<dl>
<dt className="inline-flex items-start gap-1 text-medium">
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("surface-", ""))}
{sanitizedName}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={token.name}
title={`${sanitizedName} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{ref ? (
Expand All @@ -257,7 +304,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
{sanitizeName(ref.name)}
</Link>
) : (
getColorString(x.value)
getColorString(token.value)
)}
</dd>
</dl>
Expand All @@ -270,14 +317,20 @@ export const SemanticView = ({ cat }: { cat: string }) => {

return (
<Grid>
{colors.map((x) => {
const ref = getGlobalReference(x.value);
{colors.map((token) => {
const ref = getGlobalReference(token.value);

const sanitizedName = sanitizeName(token.name.replace("surface-", ""));

return (
<div key={x.name} id={x.name} className="z-0 flex w-fit items-center">
<div
key={token.name}
id={token.name}
className="z-0 flex w-fit items-center"
>
<div
style={{
background: `var(${x.name})`,
background: `var(${token.name})`,
boxShadow: `inset 0 2px 4px 0 rgba(0,0,0,0.06)`,
}}
className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
Expand All @@ -287,9 +340,13 @@ export const SemanticView = ({ cat }: { cat: string }) => {
<dl>
<dt className="inline-flex items-start gap-1 text-medium">
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("surface-", ""))}
{sanitizedName}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={token.name}
title={`${sanitizedName} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{ref ? (
Expand All @@ -300,7 +357,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
{sanitizeName(ref.name)}
</Link>
) : (
getColorString(x.value)
getColorString(token.value)
)}
</dd>
</dl>
Expand Down
8 changes: 7 additions & 1 deletion aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@ export const ShadowView = ({ cat }: { cat: string }) => {
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("shadow-", ""))}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={x.name}
title={`${sanitizeName(
x.name.replace("shadow-", ""),
)} kopier`}
size="small"
/>
</dt>
<dd className="mt-auto text-medium text-text-subtle">
{x.value}
Expand Down
8 changes: 7 additions & 1 deletion aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ export const ShapesView = ({ cat }: { cat: string }) => {
<span className="flex min-h-8 items-center">
{sanitizeName(x.name.replace("border-radius-", ""))}
</span>
<CopyButton copyText={x.name} size="small" />
<CopyButton
copyText={x.name}
title={`${sanitizeName(
x.name.replace("border-radius-", ""),
)} kopier`}
size="small"
/>
</dt>

<dd className="mt-auto text-medium text-text-subtle">
Expand Down
Loading

0 comments on commit 88dc43b

Please sign in to comment.