Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added copy button to "How to start" code block #147

Closed
wants to merge 2 commits into from
Closed

Added copy button to "How to start" code block #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb36c96
resolve issue
Dec 5, 2023
c5df16c
fix issues
meganiksel Dec 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 115 additions & 0 deletions src/blocks/CustomBanner/CustomBanner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
@use '../../variables.scss';

$block: '.#{variables.$ns}custom-banner';

@mixin subtitle {
@include pcStyles.heading5();
font-weight: normal;
}

#{$block} {
@include pcStyles.animate();

$class: &;
$borderRadius: pcVariables.$borderRadius;

&__content {
width: 100%;
border-radius: $borderRadius;
display: flex;

min-height: 271px;
}

&__title {
text-align: center;
@include pcStyles.heading2();

a {
@include pcStyles.link();
}
}

&__info,
&__image {
flex: 1;
}

&__info {
display: flex;
flex-direction: column;
max-width: 100%;
align-items: center;
justify-content: center;
padding: 32px;
}

&__subtitle {
text-align: center;
display: inline-block;
margin-top: 8px;
@include subtitle();

& p {
@include subtitle();
}
}

&__commands-wrapper {
width: 800px;
max-width: 100%;
margin-top: 32px;
padding: 0 48px 0 16px;
background: #160d1b;
border-radius: 16px;
position: relative;

@media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
width: inherit;
}
}

&__commands {
max-width: 100%;
padding: 16px 16px 16px 0;
overflow-x: auto;
white-space: nowrap;
}

&__command {
@include pcStyles.text-code-2();

margin-top: 8px;

&:first-child {
margin-top: 0;
}
}

&__buttons {
display: flex;
margin-top: 28px;

@media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
flex-direction: column;
align-items: center;
}
}

&__button {
margin: 0 8px;

@media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
margin: 8px 0;
}
}

&__copy-button {
position: absolute;
cursor: pointer;
right: 16px;
top: 16px;
}
}
137 changes: 137 additions & 0 deletions src/blocks/CustomBanner/CustomBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import {
Animatable,
AnimateBlock,
HTML,
ThemeSupporting,
YFMWrapper,
useTheme,
} from '@gravity-ui/page-constructor';
import {Button, ButtonProps, ClipboardIcon, CopyToClipboard, Icon} from '@gravity-ui/uikit';
import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
import React from 'react';

import {block, getThemedValue} from '../../utils';
import {CustomBlock} from '../constants';

import './CustomBanner.scss';

const TIMEOUT = 1000;

const b = block('custom-banner');

type CustomButton = ButtonProps & {
text: string;
icon?: SVGIconData;
};

export type CustomBannerProps = Animatable & {
title: string;
subtitle?: string;
image?: ThemeSupporting<string>;
color?: ThemeSupporting<string>;
commands?: string[];
buttons?: CustomButton[];
};

export type CustomBannerModel = CustomBannerProps & {
type: CustomBlock.CustomBanner;
};

export const CustomBanner: React.FC<CustomBannerProps> = ({
animated,
title,
subtitle,
image,
color,
commands,
buttons,
}) => {
const [theme] = useTheme();

const contentStyle: Record<string, string> = {};

if (color) {
contentStyle.backgroundColor = getThemedValue(color, theme);
}

if (image) {
const themedImage = getThemedValue(image, theme);
contentStyle.backgroundImage = `url(${themedImage})`;
contentStyle.backgroundSize = 'cover';
contentStyle.backgroundPosition = 'center';
}

const textCommands = commands?.join(' && ') || '';

return (
<AnimateBlock className={b()} animate={animated}>
<div className={b('content')} style={contentStyle}>
<div className={b('info')}>
<h2 className={b('title')}>
<HTML>{title}</HTML>
</h2>
{subtitle && (
<YFMWrapper
className={b('subtitle')}
content={subtitle}
modifiers={{constructor: true}}
/>
)}
{commands && commands.length > 0 ? (
<>
<div className={b('commands-wrapper')}>
<div className={b('commands')}>
{commands.map((item, index) => {
return (
<div key={index} className={b('command')}>
{item}
</div>
);
})}
</div>
<div className={b('copy-button')}>
<CopyToClipboard text={textCommands} timeout={TIMEOUT}>
{(status) => {
return (
<div>
<ClipboardIcon
size={16}
status={status}
className={b('copy-icon')}
/>
</div>
);
}}
</CopyToClipboard>
</div>
</div>
</>
) : null}
{buttons && buttons.length > 0 ? (
<div className={b('buttons')}>
{buttons.map((button, index) => {
const {icon, text, ...buttonProps} = button;
return (
<div key={index} className={b('button')}>
<Button size="xl" {...buttonProps}>
{icon ? (
<Icon
className={b('button-icon')}
data={icon}
size={16}
/>
) : null}
{text}
</Button>
</div>
);
})}
</div>
) : null}
</div>
</div>
</AnimateBlock>
);
};

export default CustomBanner;